<template>
  <div id="CraftsmanDetails" :class="{ smallFontSize: showEdition, mediumFontSize: !showEdition }">
    <!--<div class="title">-->
    <!--<span @click="onClickLeft" style="position: absolute;left: 5px;display: flex;align-items: center;font-size: 14px;">-->
    <!--<van-icon name="arrow-left" />-->
    <!--返回-->
    <!--</span>-->
    <!--工匠服务详情-->
    <!--</div>-->
    <div v-if="craftsmanDetails" class="cards">
      <div class="top">
        <div class="card">
          <div style="width: 62%; height: 50%; display: flex; align-items: center; padding: 0 10px; float: left">
            <!-- <svg t="1642844845355" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2221" width="50" height="50">
              <path d="M799.811 270.228l-17.07 12.872c-2.635 1.987-6.416 1.457-8.403-1.178s-1.457-6.416 1.178-8.403l17.071-12.872c2.635-1.987 6.416-1.457 8.403 1.178 1.986 2.635 1.456 6.416-1.179 8.403z" fill="#FFFFFF" p-id="2222"></path>
              <path d="M508.763 245.961m-6.5 0a6.5 6.5 0 1 0 13 0 6.5 6.5 0 1 0-13 0Z" fill="#FFFFFF" p-id="2223"></path>
              <path d="M510.366 926.942c-55.902 0-110.141-10.952-161.208-32.552-49.318-20.859-93.606-50.719-131.636-88.748-38.03-38.03-67.889-82.318-88.749-131.637-21.6-51.067-32.552-105.306-32.552-161.208s10.952-110.141 32.552-161.208c20.859-49.318 50.719-93.606 88.749-131.636 38.029-38.03 82.318-67.889 131.636-88.749 51.067-21.6 105.306-32.552 161.208-32.552 55.903 0 110.141 10.952 161.208 32.552 49.317 20.859 93.606 50.719 131.636 88.749 38.029 38.029 67.889 82.318 88.748 131.636 21.6 51.068 32.552 105.306 32.552 161.208s-10.952 110.141-32.552 161.208c-20.859 49.318-50.719 93.606-88.748 131.637-38.029 38.029-82.318 67.889-131.636 88.748-51.067 21.6-105.305 32.552-161.208 32.552z m0-798.289c-211.818 0-384.145 172.327-384.145 384.145 0 211.818 172.327 384.145 384.145 384.145S894.51 724.616 894.51 512.798c0-211.818-172.326-384.145-384.144-384.145z" fill="" p-id="2224"></path>
              <path d="M693.332 478.435m-43.668 0a43.668 43.668 0 1 0 87.336 0 43.668 43.668 0 1 0-87.336 0Z" fill="" p-id="2225"></path>
              <path d="M329.332 481.247m-43.668 0a43.668 43.668 0 1 0 87.336 0 43.668 43.668 0 1 0-87.336 0Z" fill="" p-id="2226"></path>
              <path d="M515.871 687.09c-22.304 0-45.171-7.91-62.739-21.702C433.701 650.134 423 629.646 423 607.696h20c0 35.002 38.404 59.394 72.871 59.394 33.548 0 72.545-27.542 72.545-63.05h20c0 22.005-10.539 43.058-29.677 59.282-17.817 15.105-40.732 23.768-62.868 23.768z" fill="" p-id="2227"></path>
              <path d="M636.516 623.965a67.621 27.94 0 1 0 135.242 0 67.621 27.94 0 1 0-135.242 0Z" fill="#02FFF0" p-id="2228"></path>
              <path d="M260.711 625.965a67.621 27.94 0 1 0 135.242 0 67.621 27.94 0 1 0-135.242 0Z" fill="#02FFF0" p-id="2229"></path>
            </svg>-->
            <div class="yuanPhoto">
              <span style="color: #fff">{{ craftsmanDetails.artisanName.substring(1) }}</span>
            </div>
            <div style="margin-left: 10px">
              <p style="font-weight: bold">{{ craftsmanDetails.artisanName }}</p>
              <p>{{ craftsmanDetails.belongArea }}</p>
            </div>
          </div>
          <div style="width: 30%; height: 50%; float: left; display: flex; align-items: center; padding: 0 10px">
            <img v-for="(item, index) in craftsmanDetails.artisanGrade" :key="index" src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/GJFW/16.png" />
          </div>
          <div style="width: 100%; height: 50%; padding-top: 50%" class="list">
            <ul>
              <li v-for="(item, index) in listData" :key="index">
                <p>{{ item.name }}</p>
                <span>{{ craftsmanDetails[item.value] == '' && craftsmanDetails[item.value] != 0 ? '暂无数据' : craftsmanDetails[item.value] }}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div v-if="craftsmanDetails" class="content">
      <div style="padding: 0 10px">
        <p
          :class="{ titleSmallFontSize: showEdition, titleMediumFontSize: !showEdition }"
          style="height: 50px; display: flex; align-items: center; border-bottom: 1px solid #d2d2d2; margin-bottom: 20px">
          <span style="margin-right: 10px" class="line"></span>
          基本信息
        </p>
        <ul class="basicData">
          <li v-for="(item, index) in basicData" :key="index">
            <p>
              <span style="color: #5d5d5d; margin-right: 20px">{{ item.name }}</span>
              <span>{{ craftsmanDetails[item.value] ? craftsmanDetails[item.value] : '暂无数据' }}</span>
            </p>
          </li>
        </ul>
        <p
          :class="{ titleSmallFontSize: showEdition, titleMediumFontSize: !showEdition }"
          style="height: 50px; display: flex; align-items: center; border-bottom: 1px solid #d2d2d2; margin-bottom: 20px">
          <span style="margin-right: 10px" class="line"></span>
          信用评价
        </p>
        <ul class="basicData">
          <li v-for="(item, index) in basicData1" :key="index">
            <p>
              <span style="color: #5d5d5d; margin-right: 20px">{{ item.name }}</span>
              <span>{{ fenshu || '暂无数据' }}</span>
            </p>
          </li>
        </ul>
        <p
          :class="{ titleSmallFontSize: showEdition, titleMediumFontSize: !showEdition }"
          style="height: 50px; display: flex; align-items: center; border-bottom: 1px solid #d2d2d2; margin-bottom: 20px">
          <span style="margin-right: 10px" class="line"></span>
          得奖信息
        </p>
        <ul class="basicData" v-if="JCZZData.length > 0">
          <!-- <span style="color: #5D5D5D;margin-right: 20px;">{{ item.name }}</span> -->
          <van-collapse v-model="activeNames" v-for="(items, index1) in JCZZData" :key="index">
            <van-collapse-item :title="items.reduceGradeInfo || '暂无标题'" :name="index1">{{ items.gradeItemInfoComment }}</van-collapse-item>
          </van-collapse>
        </ul>
        <span v-else style="color: #5d5d5d; margin-right: 20px">暂无数据</span>
        <p
          :class="{ titleSmallFontSize: showEdition, titleMediumFontSize: !showEdition }"
          style="height: 50px; display: flex; align-items: center; border-bottom: 1px solid #d2d2d2; margin-bottom: 20px">
          <span style="margin-right: 10px" class="line"></span>
          惩罚信息
        </p>
        <ul class="basicData" v-if="JCZZData1.length > 0">
          <!-- <span style="color: #5D5D5D;margin-right: 20px;">{{ item.name }}</span> -->
          <van-collapse v-model="activeNames1" v-for="(items, index1) in JCZZData1" :key="index">
            <van-collapse-item :title="items.reduceGradeInfo || '暂无标题'" :name="index1">{{ items.gradeItemInfoComment }}</van-collapse-item>
          </van-collapse>
        </ul>
        <span v-else style="color: #5d5d5d; margin-right: 20px">暂无数据</span>
      </div>
    </div>
    <div class="bottom" v-if="showBut">
      <div @click="follow" style="float: left; width: 18%; padding-left: 3%">
        <img v-if="!isFollow" width="30" src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/GJFW/20.png" />
        <img v-if="isFollow" width="30" src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/GJFW/21.png" />
        <p>收藏</p>
      </div>
      <div class="btn" style="float: left; width: 80%">
        <ul>
          <li v-for="(item, index) in btnData" :key="index" :style="{ background: item.color }" @click="btnDataClick(item)">
            <div style="text-align: center">
              <p>
                <img :src="item.icon" width="20" />
                <span>{{ item.name }}</span>
              </p>
              <p style="font-size: 14px">{{ item.content }}</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import App from '../../../App'
import { GJDBFunction2 } from '../../../utils/queryData'
import {houseCraftsmanprojectSave1 } from '@/utils/GJSave'
import { houseCraftsmanprojectSave } from '@/utils/api'
import {
  getArtisans,
  ArtisanCollection,
  ArtisanfollowSave,
  ArtisanthumbsUpSave,
  ArtisanthumbsUpDelete,
  ArtisanfollowDelete,
  QuerySignCallback,
  getLikeIt,
  CancelLike,
  sendUserToGsa,
  zhejiangHouseArtisanSincerity,
  zhejiangHouseArtisanSincerityArtisanGrade
} from '../../../utils/api'
export default {
  components: { App },
  data() {
    return {
      isFollow: false,
      showBut: false,
      showEdition: true,
      craftsmanDetails: '',
      nowIndex: 0,
      rowData: {},
      listData: [
        {
          name: '所属区域',
          value: 'belongArea'
        },
        {
          name: '签约量',
          value: 'signNum'
        },
        {
          name: '点赞量',
          value: 'praiseNum'
        }
      ],
      basicData: [
        {
          name: '个人介绍',
          value: 'description'
        },
        {
          name: '服务区域',
          value: 'belongArea'
        },
        {
          name: '联系方式',
          value: 'phone'
        },
        {
          name: '证书编号',
          value: 'bookNumberNew'
        },
        {
          name: '工作年限',
          value: 'setYeare'
        },
        {
          name: '擅长工种',
          value: 'workerType'
        }
      ],
      basicData1: [
        {
          name: '评价分数',
          value: 'fenshu'
        }
      ],
      basicData2: [
        {
          name: '奖惩信息',
          value: 'fenshu'
        }
      ],
      fenshu: '',
      CustomerEvaluation: [
        {
          name: '全部',
          value: 2
        },
        {
          name: '好评',
          value: 2
        },
        {
          name: '中评',
          value: 0
        },
        {
          name: '差评',
          value: 0
        }
      ],
      EvaluationContent: [
        {
          name: '王江',
          time: '12月20日',
          content: '评价内容评价内容评价内容评价内容评价内容评价内 评价内容容'
        },
        {
          name: '王江',
          time: '12月20日',
          content: '评价内容评价内容评价内容评价内容评价内容评价内 评价内容容'
        }
      ],
      activeNames: [1],
      activeNames1: [1],
      JCZZData: [],
      JCZZData1: [],
      btnData: [
        {
          name: '为TA点赞',
          color: '#3F8FFC',
          content: '为工匠点赞吧',
          icon: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/GJFW/22.png'
        },
        {
          name: '查看证书',
          color: '#00B578',
          content: '查看工匠证书',
          icon: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/GJFW/18.png'
        }
      ],
      LikeIt: false
    }
  },
  methods: {
    CustomerEvaluationClick(index) {
      this.nowIndex = index
    },
    //获取奖惩信息
    async getLikeIt1() {
      console.log(this.craftsmanDetails, 'Customer')
      let param = {
        artisanId: this.craftsmanDetails.id
      }
      const res = await zhejiangHouseArtisanSincerityArtisanGrade(param)
      let result = res.data.data
      if (res.data.code === 200) {
        this.fenshu = result.totalGrade
        if (result.artisanSincerities.length > 0) {
          result.artisanSincerities.forEach((item) => {
            if (item.gradeItem == 0) {
              //加分
              this.JCZZData.push(item)
            } else {
              //减分
              this.JCZZData1.push(item)
            }
          })
        } else {
          this.JCZZData = []
          this.JCZZData1 = []
        }
      } else {
        this.$toast.fail(res.data.msg)
      }
      console.log(this.JCZZData, this.JCZZData1, 'dssdfre')
    },
    //注册工匠接口
    getRegister1: async function () {
      //注册接口 this.craftsmanDetails.id 工匠id
      //将工匠推送到eca
      //调用存储过程
      //  let paerssend = {
      //   procName: "up_updateGJ",
      //   dtParams: JSON.stringify([{ I_USERID:this.user_id,I_TYPE:window.sessionStorage.getItem('PKID')}]),
      //   token: window.localStorage.getItem("token"),
      // };
      // let paramsendMEssage = {
      //   accessCode: "69db6bece3a7480592e2ec753d1e335e",
      //   cityCode: window.localStorage.getItem("citycode")
      //     ? window.localStorage.getItem("citycode")
      //     : "",
      //   params: paerssend,
      // };
      // const reqwmsg = await QuerySignCallback(paramsendMEssage);
      // const JSONSend = JSON.parse(reqwmsg.data.data).Data;
      let data = [
        {
          I_USERID: "'" + this.craftsmanDetails.idCard + "'",
          I_GJXM: "'" + this.craftsmanDetails.artisanName + "'",
          I_GJSJH: "'" + this.craftsmanDetails.phone + "'",
          I_TYPE: window.sessionStorage.getItem('PKID')
        }
      ]
      const JSONSend = await GJDBFunction2('up_updateGJX', data)
      if (JSONSend.length > 0) {
        this.$toast.fail('更新工匠成功')
        //跳转到签合同
        //作废之前的合同
        let paerssend1 = {
          procName: 'up_query',
          dtParams: JSON.stringify([{ I_USERID: window.sessionStorage.getItem('ROW_GUID1'), I_TYPE: 14 }]),
          token: window.localStorage.getItem('token')
        }
        let paramsendMEssage1 = {
          accessCode: '69db6bece3a7480592e2ec753d1e335e',
          cityCode: window.localStorage.getItem('citycode') ? window.localStorage.getItem('citycode') : '',
          params: paerssend1
        }
        const reqwmsg1 = await QuerySignCallback(paramsendMEssage1)
        const res22 = await GJDBFunction2('get_gjcjxmsj', [{ get_gjcjxmsj: JSON.parse(window.sessionStorage.getItem('ROW_GUID1')).ROW_GUID }])
        let params = {
          ID: res22[0].ID,
          commencementtime: res22[0].COMMENCEMENTTIME,
          completiontime: res22[0].COMPLETIONTIME,
          houseapplicant: res22[0].HOUSEAPPLICANT,
          construcitonaddress: res22[0].CONSTRUCITONADDRESS,
          Planningpermit: res22[0].PLANNINGPERMIT,
          buildstorey: res22[0].BUILDSTOREY,
          buildarea: res22[0].BUILDAREA,
          craftsmancode: res22[0].CRAFTSMANCODE,
          city: res22[0].CITY,
          county: res22[0].COUNTY,
          town: res22[0].TOWN,
          village: res22[0].VILLAGE,
          phone: res22[0].PHONE,
          housebuilding: res22[0].HOUSEBUILDING,
          rowGuid: res22[0].ROWGUID,
          applytime: res22[0].APPLYTIME,
          years: res22[0].YEARS,
          contractid: res22[0].CONTRACTID,
          isWhole: res22[0].ISWHOLE,
          isCompleted: res22[0].ISCOMPLETED,
          projectAmount: res22[0].PROJECTAMOUNT,
          isOnline: res22[0].ISONLINE
        }
        const res = await houseCraftsmanprojectSave(params)
        this.$router.push({
          path: '/ConstructionContract',
          query: { data: window.sessionStorage.getItem('ROW_GUID1') }
        })
      } else {
        this.$toast.fail('更新工匠失败')
      }
    },
    btnDataClick: async function (item) {
      debugger
      console.log(this.$store.state.VERSIONNUMBER)
      switch (item.name) {
        case '确定':
          if (this.$route.query.type) {
            this.$router.push({
              path: '/FarmersRenovation',
              query: {
                data: JSON.parse(this.$route.query.datas),
                id: JSON.parse(this.$route.query.data)
              }
            })
          } else if (JSON.parse(window.sessionStorage.getItem('fileData'))?.S) {
            this.$router.push({
              path: '/fileData'
            })
          } else if (this.$route.query?.id == '施工备案变更') {
            this.$router.push({
              path: '/biangeng'
            })
            window.sessionStorage.setItem('GJdata', JSON.stringify(this.craftsmanDetails))
          } else if (this.$route.query?.id == 'NewChooseCraftsman') {
            let newObj = JSON.parse(window.sessionStorage.getItem('applyFor'))
            newObj.TYPE = '59'
            newObj.TYPE_DICNAME = '工匠'
            window.sessionStorage.setItem('applyFor', JSON.stringify(newObj))
            this.$router.push({
              path: '/selectCompany',
              query: {
                data: JSON.stringify(this.craftsmanDetails)
              }
            })
          } else if (!this.$store.state.VERSIONNUMBER && window.sessionStorage.getItem('ChangeGJ') !== 'true') {
            debugger
            if (this.$route.query?.name) {
              this.$toast.fail('请在工匠服务中选择工匠')
              return false
            }
            this.$router.push({
              path: 'ChooseCraftsman'
            })
          } else if (window.sessionStorage.getItem('ChangeGJ') !== 'false') {
            //更换工匠接口
            //1.先注册工匠
            this.getRegister1()
            window.sessionStorage.setItem('ChangeGJ', false)
          } else if (this.$store.state.VERSIONNUMBER == 1) {
            let newObj = JSON.parse(window.sessionStorage.getItem('applyFor'))
            newObj.TYPE = '59'
            newObj.TYPE_DICNAME = '工匠'
            // window.sessionStorage.setItem('selectCompanyNew', JSON.stringify(newObj))
            this.$router.push({
              path: '/fileData'
            })
            // this.$router.push({
            //   path: '/selectCompany',
            //   query: {
            //     data: JSON.stringify(this.craftsmanDetails)
            //   }
            // })
          }
          break
        case '为TA点赞':
          let params = {
            accessCode: '29ff26f660fc47f79c15bff382eeca6d',

            id: this.craftsmanDetails.id,
            appKey: '6738b790-69e8-11ec-a673-6805cab640a0',
            userId: window.localStorage.getItem('ISZHUCE')
          }
          const res = await ArtisanthumbsUpSave(params)
          if (res.data.data) {
            this.LikeIt = true
            this.btnData[0].name = '取消点赞'
            this.btnData[0].content = ''
            this.craftsmanDetails.praiseNum = Number(this.craftsmanDetails.praiseNum)
            this.craftsmanDetails.praiseNum += 1
            this.$toast.success('点赞量+1')
            // this.$notify({ type: 'success', message: '点赞量+1' });
          } else {
            this.$toast.fail('点赞失败！')
            // this.$notify({ type: 'error', message: '点赞失败！' });
          }
          break
        case '取消点赞':
          let params1 = {
            accessCode: '2cf1a914300347bd822534cc13c6f5a9',

            appKey: '6738b790-69e8-11ec-a673-6805cab640a0',
            userId: window.localStorage.getItem('ISZHUCE'),
            id: this.craftsmanDetails.id
            // cityCode: this.craftsmanDetails.citycode
          }
          const res1 = await CancelLike(params1)
          if (res1.data.data) {
            this.LikeIt = false
            this.btnData[0].name = '为TA点赞'
            this.btnData[0].content = '为工匠点赞吧'
            this.craftsmanDetails.praiseNum = Number(this.craftsmanDetails.praiseNum)
            this.craftsmanDetails.praiseNum -= 1
            this.$toast.success('取消点赞成功')
            // this.$notify({ type: 'success', message: '取消点赞成功' });
          } else {
            this.$toast.fail('取消点赞失败')
            // this.$notify({ type: 'error', message: '取消点赞失败' });
          }
          break
        case '查看证书':
          if (this.craftsmanDetails.bookNumberNew) {
            this.$router.push({
              path: '/CKZS',
              query: {
                data: this.craftsmanDetails.id
              }
            })
          } else {
            this.$toast.fail('暂无相关证件信息')
          }
      }
    },
    onClickLeft() {
      this.$router.push({
        path: 'craftsmanServices'
      })
    },
    getData: async function () {
      // let Base64 = require('js-base64').Base64;1
      let datanew = this.$route.query.data ? JSON.parse(this.$route.query.data) : ''
      let data1new = this.$route.query?.data1 ? JSON.parse(this.$route.query?.data1) : ''
      console.log(this.$route.query, 'xoapo')
      let params = {
        accessCode: '29ff26f660fc47f79c15bff382eeca6d',
        id: this.$route.query.data != undefined ? datanew.id : data1new.artisanId,
        cityCode: '441300000000'
      }
      const res = await getArtisans(params)
      this.craftsmanDetails = res.data.data
      // this.getLikeIt1()
      // this.craftsmanDetails.phone = Base64.decode(this.craftsmanDetails.phone)
      this.getLikeIt()
      this.getSCGJ()
    },
    getSCGJ: async function (data) {
      let params = {
        accessCode: '29ff26f660fc47f79c15bff382eeca6d',
        // userId: JSON.parse(window.localStorage.getItem('userName'))?JSON.parse(window.localStorage.getItem('userName')).userId:"",
        id: this.craftsmanDetails.id,
        appKey: '6738b790-69e8-11ec-a673-6805cab640a0',
        userId: window.localStorage.getItem('ISZHUCE'),
        pageNo: 1,
        pageSize: 1000
      }
      const res = await ArtisanCollection(params)

      res.data.data.pageList && res.data.data.pageList.length > 0 ? (this.isFollow = true) : (this.isFollow = false)
    },
    follow: async function () {
      if (!this.isFollow) {
        let params = {
          accessCode: '29ff26f660fc47f79c15bff382eeca6d',
          id: this.craftsmanDetails.id,
          appKey: '6738b790-69e8-11ec-a673-6805cab640a0',
          userId: window.localStorage.getItem('ISZHUCE')
        }
        const res = await ArtisanfollowSave(params)
        if (res.data.data) {
          this.isFollow = !this.isFollow
          this.$toast.success('收藏成功！')
          // this.$notify({ type: 'success', message: '收藏成功！' });
        } else {
          this.$toast.fail('收藏失败！')
          // this.$notify({ type: 'error', message: '收藏失败！' });
        }
      } else {
        let params = {
          accessCode: '29ff26f660fc47f79c15bff382eeca6d',

          id: this.craftsmanDetails.id,
          appKey: '6738b790-69e8-11ec-a673-6805cab640a0',
          userId: window.localStorage.getItem('ISZHUCE')
        }
        const res = await ArtisanfollowDelete(params)
        if (res.data.data) {
          this.isFollow = !this.isFollow
          this.$toast.success('取消收藏成功！')
          // this.$notify({ type: 'success', message: '取消收藏成功！' });
        } else {
          this.$toast.fail('取消收藏失败！')
          // this.$notify({ type: 'error', message: '取消收藏失败！' });
        }
      }
    },
    getLikeIt: async function () {
      let params = {
        accessCode: 'd6158bcf5e1c4a079375143b67b311f3',
        // userId: JSON.parse(window.localStorage.getItem('userName'))?JSON.parse(window.localStorage.getItem('userName')).userId:"",
        id: this.craftsmanDetails.id,
        appKey: '6738b790-69e8-11ec-a673-6805cab640a0',
        userId: window.localStorage.getItem('ISZHUCE')
      }
      const res = await getLikeIt(params)
      if (res.data.code == 200) {
        this.LikeIt = res.data.data
        if (this.LikeIt) {
          // (1)
          this.btnData[0].name = '取消点赞'
          this.btnData[0].content = ''
        } else {
          this.btnData[0].name = '为TA点赞'
          this.btnData[0].content = '为工匠点赞吧'
        }
      }
    }
  },
  mounted() {
    this.showBut = true
    if (this.$route.query.data != undefined) {
      this.rowData = JSON.parse(this.$route.query.data)
      this.getData()
    } else {
      this.rowData = JSON.parse(this.$route.query.data1)
      this.getData()
    }
    if (this.$store.state.VERSIONNUMBER == 1 || this.$route.query.id || (window.sessionStorage.getItem('ChangeGJ') != 'false' && window.sessionStorage.getItem('ChangeGJ') != null)) {
      this.btnData.push({
        name: '确定',
        color: '#00B578',
        content: ''
        //                  icon:'https://nfzjszlb.jst.zj.gov.cn/serverfile/zh1eliban/icon/ZLJ/GJFW/24.png'
      })
    }

    this.showEdition = this.$store.state.Edition
    if (ZWJSBridge) {
      ZWJSBridge.setTitle({
        title: '工匠服务详情'
      })
        .then((res) => {})
        .catch((err) => {})
    }
  }
}
</script>
<style lang="scss" scoped>
#CraftsmanDetails {
  height: 100vh;
  -webkit-overflow-scrolling: touch;
  overflow: hidden;
  .cards {
    height: 340px;
  }
  .top {
    width: 100%;
    height: 206px;
    background: linear-gradient(-45deg, #0b61f4, #3f8ffc);
    padding-top: 59px;
  }

  .title {
    width: 100%;
    height: 50px;
    background: #fff;
    line-height: 50px;
    text-align: center;
    /*font-size: 17px;*/
    position: relative;
  }

  .card {
    width: 80%;
    height: 271px;
    background: #ffffff;
    box-shadow: 0px 6px 9px 0px rgba(11, 97, 244, 0.13);
    border-radius: 16px;
    margin: 0 auto;
    position: absolute;
    left: 10%;

    .yuanPhoto {
      height: 80px;
      width: 80px;
      border-radius: 100px;
      position: relative;
      //   top: 40%;
      //   left: 40%;
      //   border: solid 10px purple;
      //   box-shadow: 0px 0px 0px 10px red, 0px 0px 0px 10px black inset;
      background: #3f8ffc;

      span {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 18px;
      }
    }
  }

  .line {
    width: 6px;
    height: 26px;
    background: #007aff;
    display: inline-block;
  }

  .list ul li {
    width: 33.3%;
    float: left;
    text-align: center;
  }

  .basicData li {
    margin-bottom: 10px;
    /*font-size: 0.26rem;*/
  }

  .CustomerEvaluation li {
    width: 16%;
    float: left;
    height: 40px;
    margin-right: 9%;
  }

  .select {
    color: #3f8ffc;
    border-bottom: 5px solid #3f8ffc;
  }

  .content {
    height: calc(100% - 400px);
    overflow: auto;
  }

  .bottom {
    height: 60px;
    width: 100vw;
    background: #ffffff;
    box-shadow: 0px -4px 9px 0px rgba(0, 0, 0, 0.13);
    padding: 10px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .btn ul {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .btn ul li {
    width: 30%;
    height: 52px;
    background: #3f8ffc;
    border-radius: 6px;
    float: left;
    margin-left: 3.3%;
    text-align: center;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    padding: 5px 0;
  }
}
</style>
